<template>
    <section id="live">
        <mt-navbar v-model="selected">
            <mt-tab-item id="1">热门</mt-tab-item>
            <mt-tab-item id="2">关注</mt-tab-item>
            <mt-tab-item id="3">穿搭</mt-tab-item>
            <mt-tab-item id="4">美妆</mt-tab-item>
        </mt-navbar>

        <!-- tab-container -->
        <mt-tab-container v-model="selected">
            <mt-tab-container-item id="1">
                <liveCon :data="liveLists"></liveCon>
            </mt-tab-container-item>
            <mt-tab-container-item id="2">
                <liveCon :data="liveLists2" v-if="liveLists2!=''"></liveCon>
                <div class="tip" v-else>
                    <div></div>
                    <p>宝宝还没有关注的主播开播哦~</p>
                </div>
            </mt-tab-container-item>
            <mt-tab-container-item id="3">
                <liveCon :data="liveLists3"></liveCon>
            </mt-tab-container-item>
            <mt-tab-container-item id="4">
                <liveCon :data="liveLists4"></liveCon>
            </mt-tab-container-item>
        </mt-tab-container>
    </section>
</template>

<script>
import living from "../live/living.vue";
export default {
    components: {
        liveCon: living
    },
    data() {
        return {
            selected: "1",
            liveLists: [],
            liveLists2: [],
            liveLists3: [],
            liveLists4: []
        };
    },
    mounted() {
        this.$http.get("./data/live.json").then(res => {
            this.liveLists = res.data.liveList;
            this.liveLists2 = res.data.liveList2;
            this.liveLists3 = res.data.liveList3;
            this.liveLists4 = res.data.liveList4;
            // console.log(this.liveLists[0].shopList);
        });
    }
};
</script>

<style lang="scss">
$theme-color: #ff0176;
#live {
    .mint-navbar {
        justify-content: space-around;
        .mint-tab-item {
            flex: unset;
            width: 15%;
            .mint-tab-item-label {
                font-size: 16px;
            }
            &.mint-tab-item.is-selected {
                color: $theme-color;
                border-bottom: 2px solid $theme-color;
            }
        }
    }
    .tip {
        height: 100vh;
        background-color: #ecf0f3;
        padding-top: 50px;
        margin-top: 3px;
        div {
            padding-top: 100px;
            background: url("../../assets/images/live/no-attention.png")
                no-repeat center/contain;
        }
        p {
            padding-top: 20px;
            text-align: center;
            font-size: 15px;
            color: grey;
        }
    }
}
</style>